<template>
  <div id="container" class="map"></div>
</template>
<script>
import axios from '@/utils/axios'
export default {
  data(){
    return{

    } 

  },
  methods:{
    init_map(){
        var map = new AMap.Map('container', {
            center: [116.400389, 39.93729],
            features: ['bg', 'road', 'building', 'point'],
            mapStyle: 'amap://styles/grey',
            rotation: 0,
            zoom: 11.3,
            viewMode: '3D',
            pitch: 0,
            skyColor: '#33216a'
        });

        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.plugin([
            'AMap.ToolBar',
            'AMap.MapType',
            'AMap.Geolocation',
        ], function(){
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar());
        
            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            map.addControl(new AMap.MapType());
        
            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
        });

        var layer = new Loca.ScatterPointLayer({
            map: map
        });

        var colors = [
            '#07E8E4',
            '#AD92D1',
            '#3346BD',
            '#EBEB8D',
            '#7FC97F'
        ];

        axios.get('/normal/findAllNormal').then((res)=>{
        $.get(res.data.data, function (csv) {
            layer.setData(csv.slice(0, 10000), {
                lnglat: function (obj) {
                    var value = obj.value;
                    return [value['lng'], value['lat']];
                },
                type: 'csv'
            });

            layer.setOptions({
                unit: 'px',
                style: {
                    radius: function (obj) {
                        var value = obj.value;
                        switch (parseInt(value.type)) {
                            case 3:
                                return 3;
                            case 4:
                                return 3;
                            case 41:
                                return 3;
                            case 5:
                                return 3;
                            default:
                                return 3;
                        }
                    },
                    height: 0,
                    color: function (obj) {
                        var value = obj.value;
                        switch (parseInt(value.type)) {
                            case 3:
                                return colors[0];
                            case 4:
                                return colors[1];
                            case 41:
                                return colors[2];
                            case 5:
                                return colors[3];
                            default:
                                return colors[4];
                        }
                    },
                    opacity: 1
                }
            });

            layer.render();
        });
        })
    }
  },
  created(){

  },
  mounted(){
    this.init_map()
  }
}

</script>

<style scoped>
  .map{
    height: 685px;
    width: 100%;
  }
</style>